<template>
    <div class="new-song">
        <title-comp>音乐列表</title-comp>
        <!-- 音乐列表 -->
        <div  class="list" v-if="songList.length !=0 ">
            <ul>
                <li v-for="(item,i) in songList"
                v-bind:class="item.isPlay == true ? 'current':''">
                    <div class="left">
                        <!-- 不携带整个路由了，携带ID -->
                        <router-link :to="{path: '/lyric',query: {id: item.id}}">
                            <h4>{{ item.name }}</h4>
                            <div>
                                <!-- 标准/高质量 -->
                                <i v-if="(item.playMaxbr - 0) > 320000"></i>
                                <span>
                                 {{ item.str }}
                                </span>
                            </div>
                        </router-link>
                    </div>
                    <!-- 右-->
                    <div class="right">
                      
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import TitleComp from '@/components/title-comp.vue';
import { addNewSong } from '@/request'
export default {
    name: 'newsong',
    components: { TitleComp },
    props:{
        num: [String,Number]
    },
    data(){
        return {
            // 记录最新音乐的数组
            songList:[]
        }
    },
    watch: {
        // 监听音乐索引值
        num(nVal,oldVal){
            // 数组为空 那就终止代码
            if(this.songList.length == 0) {
                return false;
            }
            // 检查新的索引值
            // console.log("nVal:",nVal);

            // 循环songList数组（映射）
            let arr = this.songList.map((item,i)=>{
                if(nVal == i){
                    // 设置高亮 播放
                    item.isPlay = true;
                }else {
                    // 设置隐藏 不播放
                    item.isPlay = false;
                }
                // 返回该选项
                return item;
            })
            // 赋值 
            this.songList = arr;
        }
    },
    created(){
        // 初始化页面
        this.getNewSong();
    },
    methods: {
        // 获取推荐最新音乐
        getNewSong(num=10){
            addNewSong({limit: num}).then(
                data=>{
                    // console.log(data)
                    if(data.code == 200) {
                        let {result} = data;
                        // 整合数据
                        let arr = result.map((item,index)=>{
                            let obj = {};
                            obj.alg = item.alg;
                            obj.id = item.id;
                            obj.name = item.name;
                            obj.picUrl = item.picUrl;
                            let {artists} = item.song;
                            let str = '';
                            for(let i = 0 ; i < artists.length ; i ++){
                                str += artists[i].name+" /"
                            }
                            str =  str.slice(0,str.length-1);
                            obj.str = str;
                            obj.song = item.song
                            obj.playMaxbr = item.song.privilege.playMaxbr
                            obj.isPlay = false;
                            // console.log(item.song.privilege.playMaxbr)
                            return obj;
                        })
                        // 赋值
                        this.songList = arr;
                    }
                }
            )
            .catch(
                err=>{
                    console.log(err);
                }
            )
        },
    }
}
</script>

<style lang="scss">
@import '../static/style/variable.scss';
.new-song {
    width: 100%;
    .list {
        width: 100%;
        ul {
            width: 100%;
            padding: 0 .16rem;
            box-sizing: border-box;
            li {
                width: 100%;
                padding-right: 1.3333rem;
                height: 1.4933rem;
                box-sizing: border-box;
                position: relative;
                background-color: #FCFCFD;
                border-bottom: 1px solid #ccc;
                margin-bottom: .2667rem;
                padding: 0 0 0 .2667rem;
            }
            .current {
                box-shadow: 0 0 2px $bgColor;
            }
        }

        .left {
            width: 100%;
            height: 1.45rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #FCFCFD;
            // background: pink;
            box-sizing: border-box;
            h4 {
                font-weight: normal;
                margin-bottom: .1333rem;
            }
            div {
                font-size: 12px;
                width: 100%;
                // 单行文本溢出变省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                i {
                    display: inline-block;
                    width: .4267rem;
                    height: .2933rem;
                    margin-right: .1333rem;
                    // background-color: green;
                    background-image: url(../static/images/index_icon_2x.png);
                    background-position: 0 0;
                    // 332 * 194
                    background-size: 8.8533rem * (2/3)   5.1733rem * (2/3) ;
                }
                span {
                    color: #555;
                }
            }

        }

        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 1.3333rem;
            height: 1.4933rem;
            // background-color: green;
            text-align: center;
            line-height:1.4933rem;
            flex-shrink: 0;
            span {
                display: inline-block;
                vertical-align: middle;
                width: 1.2rem  * (3/5) ;
                height:  1.2rem  * (3/5) ;
                // background-color: red;
                border-radius: 50%;
                background-image: url(../static/images/index_icon_2x.png);
                background-position: -1.28rem * (3/5)   0;
                // 332 * 194
                background-size: 8.8533rem * (3/5)   5.1733rem * (3/5) ;
            }
            span.off {
                background-position: -2.6667rem * (3/5)   0;
            }
        }

    }
}
</style>